<script setup lang="ts">
import { ref, reactive } from 'vue'
import { uploadFile, uploadImage } from '@/api/other'
import useFormdata from '@/components/x-components/hooks/use-formdata'

const form = useFormdata({
	nick_name: '张三',
	mobile: '15011112222',
	integral: 10,
	headimgurl: [
		'https://gwxt-oss-main.oss-cn-shanghai.aliyuncs.com/image/cc/cb95ee6afeeddd060e47e8b0a56085fa7f4520f79080a1559bb3a1f32d2f05.png',
	],
	files: [
		'https://gwxt-oss-main.oss-cn-shanghai.aliyuncs.com/testfiles/1a/f56ac756ff8252d51fafe60df65b054e16fd0cd313ee60644abb2bb02e3d78.pptx',
		'adf.png',
	],
	richtext: '<div style="color:red">一段文字</div>',
})
</script>

<template>
	<div class="p-4">
		<el-form class="pr-8" :model="form.formdata" label-width="80px">
			<el-form-item label="昵称" prop="name">
				<el-input v-model="form.formdata.nick_name" />
			</el-form-item>
			<el-form-item label="电话" prop="mobile">
				<el-input v-model="form.formdata.mobile" type="number" />
			</el-form-item>
			<el-form-item label="积分" prop="integral">
				<el-input-number v-model="form.formdata.integral" />
			</el-form-item>
			<el-form-item label="头像" prop="integral">
				<x-upload-image
					v-model="form.formdata.headimgurl"
					:count="3"
					:image-style="{ width: '200px', height: '100px' }"
				/>
			</el-form-item>
			<el-form-item label="文件" prop="files">
				<x-upload-file
					style="width: 400px"
					v-model="form.formdata.files"
					:count="4"
					tips="请上传小于50M的文件，允许jpg,png,ppt,pptx"
				/>
			</el-form-item>
			<el-form-item label="富文本" prop="richtext">
				<x-rich-editor v-model="form.formdata.richtext" style="height: 300px" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary">提交</el-button>
				<el-button type="default" @click="form.reset()">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
